refactor settings

6 files changed, 120 insertions, 108 deletions

diff --git a/src/routes/(app)/[username]/settings/+page.svelte b/src/routes/(app)/[username]/settings/+page.svelte
deleted file mode 100644
index 250087c1..00000000
--- a/src/routes/(app)/[username]/settings/+page.svelte
+++ /dev/null
@@ -1,104 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { fly } from 'svelte/transition';
-	import { enhance } from '$app/forms';
-	import Account from './_account.svelte';
-	import Pos from './_pos.svelte';
-	import Security from './_security.svelte';
-
-	import { Icon, Spinner, Pin } from '$comp';
-	import { t } from '$lib/translations';
-	import { failure, success } from '$lib/utils';
-	import { avatarUpload, bannerUpload, pin } from '$lib/store';
-	import { upload } from '$lib/upload';
-
-	export let data;
-	export let form;
-
-	let { user, token } = data;
-	$: update(data);
-	let update = () => ({ user, token } = data);
-
-	$: form?.user && ({ user } = form);
-
-	$: if (form?.message?.startsWith('Pin')) {
-		failure('Wrong pin, try again');
-		$pin = '';
-	}
-
-	let tab = 'account';
-
-	let tabs = [
-		{ name: 'account', key: 'ACCOUNT', comp: Account },
-		{ name: 'pos', key: 'POINT_OF_SALE', comp: Pos },
-		{ name: 'security', key: 'SECURITY', comp: Security }
-	];
-
-	$: ({ comp } = tabs.find((t) => t.name === tab));
-
-	let loading, submit;
-	let save = async (msg) => {
-		loading = true;
-
-		try {
-			if ($avatarUpload) {
-				await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress, token);
-			}
-
-			if ($bannerUpload) {
-				await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress, token);
-			}
-		} catch (e) {
-			console.log(e);
-			failure('Something went wrong');
-		}
-
-		loading = false;
-	};
-
-	let loaded;
-	onMount(() => setTimeout(() => (loaded = true), 50));
-</script>
-
-{#if loaded && user.haspin && $pin?.length !== 6}
-	<Pin />
-{/if}
-
-<form method="POST" class="mb-[154px]" use:enhance on:submit={save}>
-	<input type="hidden" name="pin" value={$pin} />
-
-	<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
-		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
-			{$t('user.settings.header')}
-		</h1>
-
-		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
-			{#each tabs as { name, key }}
-				<button
-					class="hover:opacity-80"
-					class:text-black={tab === name}
-					on:click|preventDefault={() => (tab = name)}>{$t(`user.settings.${key}`)}</button
-				>
-			{/each}
-		</div>
-
-		<svelte:component this={comp} {user} {submit} />
-	</div>
-
-	<div
-		class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
-	>
-		<button
-			bind:this={submit}
-			type="submit"
-			class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
-			class:bg-black={loading}
-		>
-			{#if loading}
-				<Spinner />
-			{:else}
-				<div class="my-auto">Save Settings</div>
-			{/if}
-		</button>
-	</div>
-</form>
diff --git a/src/routes/(app)/[username]/settings/+page.server.js b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
index 482b70b1..a6fbd9bf 100644
--- a/src/routes/(app)/[username]/settings/+page.server.js
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
@@ -1,5 +1,11 @@
-import { invalid } from '@sveltejs/kit';
+import { invalid, redirect } from '@sveltejs/kit';
 import { auth, get, post } from '$lib/utils';
+
+export function load({ params, url }) {
+	if (url.pathname.endsWith('settings')) throw redirect(307, url.pathname + '/account');
+	return params;
+}
+
 export const actions = {
 	default: async ({ cookies, locals, request }) => {
 		let form = Object.fromEntries(await request.formData());
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
new file mode 100644
index 00000000..20e1fd8f
--- /dev/null
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
@@ -0,0 +1,109 @@
+<script>
+  import { onMount } from 'svelte';
+  import { fly } from 'svelte/transition';
+  import { enhance } from '$app/forms';
+
+  import { Icon, Spinner, Pin } from '$comp';
+  import { t } from '$lib/translations';
+  import { failure, success } from '$lib/utils';
+  import { avatarUpload, bannerUpload, pin } from '$lib/store';
+  import { upload } from '$lib/upload';
+  import { page } from '$app/stores';
+
+  import Account from './_account.svelte';
+  import Pos from './_pos.svelte';
+  import Security from './_security.svelte';
+
+  export let data;
+  export let form;
+
+  let submit;
+
+  let { user, token, tab } = data;
+  console.log("TAB", tab)
+
+  $: update(data);
+  let update = () => ({ user, token } = data);
+
+  $: form?.user && ({ user } = form);
+
+  // $: if (form?.message?.startsWith('Pin')) {
+  // 	failure('Wrong pin, try again');
+  // 	$pin = '';
+  // }
+
+  let tabs = [
+    { name: 'account', key: 'ACCOUNT', comp: Account },
+    { name: 'pos', key: 'POINT_OF_SALE', comp: Pos },
+    { name: 'security', key: 'SECURITY', comp: Security }
+  ];
+
+  $: ({ comp } = tabs.find((t) => t.name === tab));
+
+  let loading;
+  let save = async (msg) => {
+    loading = true;
+
+    try {
+      if ($avatarUpload) {
+        await upload($avatarUpload.file, $avatarUpload.type, $avatarUpload.progress, token);
+      }
+
+      if ($bannerUpload) {
+        await upload($bannerUpload.file, $bannerUpload.type, $bannerUpload.progress, token);
+      }
+    } catch (e) {
+      console.log(e);
+      failure('Something went wrong');
+    }
+
+    loading = false;
+  };
+
+  let loaded;
+  onMount(() => setTimeout(() => (loaded = true), 50));
+</script>
+
+{#if loaded && user.haspin && $pin?.length !== 6}
+  <Pin />
+{/if}
+
+<form method="POST" class="mb-[154px]" use:enhance on:submit={save}>
+  <input type="hidden" name="pin" value={$pin} />
+
+  <div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
+    <h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
+      {$t('user.settings.header')}
+    </h1>
+
+    <div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
+      {#each tabs as { name, key }}
+        <a href={`/${user.username}/settings/${name}`}>
+          <button class="hover:opacity-80" class:text-black={tab === name}
+            >{$t(`user.settings.${key}`)}</button
+          >
+        </a>
+      {/each}
+    </div>
+
+    <svelte:component this={comp} {user} {submit} />
+  </div>
+
+  <div
+    class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
+  >
+    <button
+      bind:this={submit}
+      type="submit"
+      class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
+      class:bg-black={loading}
+    >
+      {#if loading}
+        <Spinner />
+      {:else}
+        <div class="my-auto">Save Settings</div>
+      {/if}
+    </button>
+  </div>
+</form>
+
diff --git a/src/routes/(app)/[username]/settings/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
index e49205ca..5d5f731f 100644
--- a/src/routes/(app)/[username]/settings/_account.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
@@ -5,7 +5,7 @@
 	import { t } from '$lib/translations';
 	import { upload } from '$lib/upload';
 
-	export let user;
+  export let user;
 
 	let selectedTheme = 1;
 	let revealPassword = false;
diff --git a/src/routes/(app)/[username]/settings/_pos.svelte b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
index ccbeeff4..ccbeeff4 100644
--- a/src/routes/(app)/[username]/settings/_pos.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
diff --git a/src/routes/(app)/[username]/settings/_security.svelte b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
index 4bdb00d4..0f45966d 100644
--- a/src/routes/(app)/[username]/settings/_security.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
@@ -8,7 +8,7 @@
 	import { invalidate } from '$app/navigation';
 	import { page } from '$app/stores';
 
-	export let user, submit;
+  export let user, submit;
 	let settingPin, setting2fa, disabling2fa;
 
 	let token = '';
@@ -27,7 +27,7 @@
 	let otp;
 	$: pinChange($current);
 	let pinChange = async (pin) => {
-		otp = await post('/otpsecret', { pin });
+		// otp = await post('/otpsecret', { pin });
 	};
 
 	let locked;
@@ -78,6 +78,7 @@
 				pin = null;
 				submit.click();
 			} catch (e) {
+        console.log(e)
 				failure('Failed to disable pin');
 			}
 		} else {